<script setup lang="ts">
import { ref } from 'vue'
import type { AlertProps, AlertEmits } from './type'
defineOptions({
  name: 'VKAlert'
})
import Icon from '../Icon/Icon.vue'
withDefaults(defineProps<AlertProps>(), {
  effect: 'light',
  closable: true
})
const emits = defineEmits<AlertEmits>()

const visible = ref(true)
const hideAlert = () => {
  visible.value = false
  emits('close')
}
</script>

<template>
  <Transition name="vk-alert-fade">
    <div
      v-if="visible"
      class="vk-alert"
      :class="{
        [`vk-alert__${type}`]: type,
        [`vk-alert__${effect}`]: effect
      }">
      <span>
        <slot>{{ content }}</slot>
      </span>
      <div class="vk-alert__close" v-if="closable">
        <Icon @click.stop="hideAlert" icon="xmark" />
      </div>
    </div>
  </Transition>
</template>

<style scoped></style>
